<template>
    <div class="category-page">
      <!-- 分类侧边栏 -->
      <el-row class="container">
        <el-col :span="4">
          <div class="category-sidebar">
            <h3>Categories</h3>
            <el-menu
              :default-active="activeCategory"
              @select="handleCategorySelect">
              <el-menu-item v-for="cat in categories" 
                           :key="cat.id" 
                           :index="cat.id.toString()">
                <el-icon><component :is="cat.icon" /></el-icon>
                <span>{{ cat.name }}</span>
              </el-menu-item>
            </el-menu>
          </div>
        </el-col>
  
        <!-- 商品列表区域 -->
        <el-col :span="20">
          <div class="snack-container">
            <!-- 筛选器 -->
            <div class="filters">
              <el-select v-model="sortBy" placeholder="Sort by">
                <el-option label="Price: Low to High" value="price-asc" />
                <el-option label="Price: High to Low" value="price-desc" />
                <el-option label="Popularity" value="popularity" />
                <el-option label="Newest" value="newest" />
              </el-select>
  
              <el-select v-model="priceRange" placeholder="Price Range">
                <el-option label="Under $5" value="0-5" />
                <el-option label="$5 - $10" value="5-10" />
                <el-option label="$10 - $20" value="10-20" />
                <el-option label="Over $20" value="20+" />
              </el-select>
            </div>
  
            <!-- 商品网格 -->
            <el-row :gutter="20">
              <el-col :span="6" 
                     v-for="snack in filteredSnacks" 
                     :key="snack.id">
                <el-card class="snack-card" 
                        @click="goToDetail(snack.id)">
                  <img :src="snack.cover" :alt="snack.name">
                  <div class="snack-info">
                    <h4>{{ snack.name }}</h4>
                    <p class="category-tag">{{ snack.categoryName }}</p>
                    <div class="price">${{ snack.price }}</div>
                    <el-rate v-model="snack.rating" 
                            disabled 
                            text-color="#ff9900" />
                  </div>
                </el-card>
              </el-col>
            </el-row>
  
            <!-- 分页 -->
            <div class="pagination">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                :page-size="pageSize"
                @current-change="handlePageChange" />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </template>
  
  <script>
  export default {
    name: 'SnackCategory',
    data() {
      return {
        activeCategory: '1',
        sortBy: '',
        priceRange: '',
        pageSize: 12,
        total: 100,
        categories: [
          { id: 1, name: 'Chips & Crisps', icon: 'Food' },
          { id: 2, name: 'Nuts & Seeds', icon: 'Food' },
          { id: 3, name: 'Chocolates', icon: 'Food' },
          { id: 4, name: 'Candies', icon: 'Food' },
          { id: 5, name: 'Dried Fruits', icon: 'Food' },
          { id: 6, name: 'Cookies', icon: 'Food' },
          { id: 7, name: 'Beverages', icon: 'Food' }
        ],
        snacks: [
          {
            id: 1,
            name: 'Potato Chips',
            categoryName: 'Chips & Crisps',
            price: 3.99,
            rating: 4.5,
            cover: '/images/chips.jpg'
          },
          // ... more snacks
        ]
      }
    },
    computed: {
      filteredSnacks() {
        // 实现筛选逻辑
        return this.snacks;
      }
    },
    methods: {
      handleCategorySelect(index) {
        this.activeCategory = index;
        // 加载对应分类的商品
      },
      handlePageChange(page) {
        // 处理分页
      },
      goToDetail(id) {
        this.$router.push(`/snack/${id}`);
      }
    }
  }
  </script>
  
  <style scoped>
  .category-page {
    min-height: 100vh;
    background: #f8f9fa;
  }
  
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
  }
  
  .category-sidebar {
    background: white;
    padding: 20px;
    border-radius: 8px;
    
    h3 {
      margin-bottom: 20px;
      padding-left: 20px;
    }
  }
  
  .filters {
    margin-bottom: 20px;
    display: flex;
    gap: 20px;
  }
  
  .snack-card {
    margin-bottom: 20px;
    cursor: pointer;
    transition: transform 0.3s;
  
    &:hover {
      transform: translateY(-5px);
    }
  
    img {
      width: 100%;
      height: 200px;
      object-fit: cover;
    }
  
    .snack-info {
      padding: 15px;
  
      h4 {
        margin: 0 0 10px 0;
      }
  
      .category-tag {
        color: #909399;
        font-size: 12px;
        margin-bottom: 10px;
      }
  
      .price {
        color: #f56c6c;
        font-size: 18px;
        font-weight: bold;
        margin: 10px 0;
      }
    }
  }
  
  .pagination {
    margin-top: 40px;
    text-align: center;
  }
  </style>